<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animal kingdom</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link rel="stylesheet" type="text/css" href="css/myButton.css">
    <link rel="stylesheet" type="text/css" href="css/shapes.css">
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <link rel="stylesheet" type="text/css" href="css/animation.css">
    <link rel="stylesheet" type="text/css" href="css/taiji.css">
    <link rel="stylesheet" type="text/css" href="css/info.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <link rel="stylesheet" type="text/css" href="css/size.css">
    <link rel="stylesheet" type="text/css" href="css/square.css">
    <link rel="stylesheet" type="text/css" href="css/audio.css">
    <!--    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link type="text/css" href="css/font-awesome.min.css"
          rel="stylesheet">

</head>
<body>
<header class="nav transition-250ms" style="z-index: 1111;transition: 2s ease;">
    <a id="top"></a>
    <h1 class="hover-right-btn">脊索动物</h1>
    <!--    https://blog.csdn.net/qq_35585701/article/details/81040901-->
    <!--    <button class="box box-blue box-100 float-right font-size-25" id="goHome">回去主页</button>-->


    <!--    <button class="box box-blue box-100 float-right font-size-25 hover-circle" id="goHome">-->
    <!--        <span>回</span>-->
    <!--        <span>去</span>-->
    <!--        <span>主</span>-->
    <!--        <span>页</span>-->
    <!--    </button>-->


    <!--    回去主页-->

    <!--    <button class="Button SearchBar-askButton Button&#45;&#45;primary Button&#45;&#45;blue" id="doLogin">登陆</button>-->
</header>
<nav>
    <div id="nav">
        <!--    ul>li*5>a[href="#"]   tab -->
        <!--    内容 {} ,光标在哪里他就在哪里生成-->
        <ul class="hover-slow">
            <li><a href="animals.html">首页</a></li>
            <li><a class="hover-show" href="#">动物分类</a>
                <!--            ul>li*3>a[href="#"]-->
                <ul>
                    <li><a href="cat.html">猫</a></li>
                    <li><a href="dog.html">狗</a></li>
                    <li><a href="#">猪</a></li>
                </ul>
            </li>
            <!--            <li><a href="erciyuan.html">去二次元</a></li>-->
            <!--            <li><a href="fantasyTown.html">去幻想乡</a></li>-->

            <li class=""><a href="腔肠动物门.html">腔肠动物门</a></li>
            <li class=""><a class="" href="Kingdom.html">界</a></li>
            <li class=""><a class="selected-nav" href="脊索模块.html">脊索模块</a></li>

            <!--            <li class=""><a  href="AnimalKingdom.html">动物界</a></li>-->

            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="contactUs.html">联系我们</a></li>
            <!--            <li><a href="beautiful.html">魔幻世界</a></li>-->
            <!--            <li><a href="ABYSS.html">阿比斯</a></li>-->
            <!--            <li><a href="contactUs.html">联系我们</a></li>-->
        </ul>
        <div class="" id="currentTime"></div>
    </div>
</nav>
<!--<div  class="nav"></div>-->
<!--<button class="Button SearchBar-askButton Button&#45;&#45;primary Button&#45;&#45;blue" id="goHome">回去主页</button>-->
<!--<div class="heart-jump"></div>-->
<!--面包屑导航-->
<!--style="display: inline-flex"-->
<!--style="background-color:palegoldenrod;"-->
<!--bg-whitesmoke-->
<div class="cols ">

    <!--    <a href="脊索动物门.html" class="box box-200-100 " style="background-color:red;">脊索动物门</a>-->
    <!--{原生动物门}-->
    <!--a.box.box-100[style="background-color:#338de$;" href="dog.html"]*7-->
    <!--    href="腔肠动物门.html"-->
    <a class="box box-200-100 hover-right-btn" style="background-color:orange;">两栖纲</a>
    <a class="box box-200-100 hover-right-btn" style="background-color:yellow;color: black">鸟纲 </a>
    <a class="box box-200-100 hover-right-btn" style="background-color:greenyellow;color: black">兽纲</a>
    <a class="box box-200-100 hover-right-btn" style="background-color:cyan;color: black">硬骨鱼纲</a>
    <a class="box box-200-100 hover-right-btn" style="background-color:cornflowerblue;">爬行纲</a>
    <a class="box box-200-100 " style="background-color:purple;">软骨鱼纲</a>
    <!--    <a href="dog.html" class="box box-200-100" style="background-color:#338de7;">软体动物门</a>-->


</div>


<!--正文-->
<!--cols-->
<!--style="background-color:palegoldenrod;"-->
<div class="row bg-whitesmoke">
    <div class="col">
        <div class="crumb-nav-container block">
            <i class="fa fa-navicon" style="transform: translateY(5px);"></i>
            <section class="crumb-nav hover-right-btn">您现在的位置：<a href="animals.html">首页</a> &gt;&gt;
                <a href="AnimalKingdom.html">动物界
                </a>&gt;&gt;
                脊索动物门
            </section>
        </div>

        <div class="main-content  main-content-articles">
            <div class="multi-column multi-column-3 multi-column-top0 ">

                <h2 class="para-level-3 para-level-3-no-bg hover-right-btn">科普文章</h2>
                <ul id="articles" class="list-box article-list hover-shadow hover-shadow-list hover-big-list ">
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201805/t20180518_5013074.html">羚牛袭击人的真相</a></li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201805/t20180507_5006939.html">诗歌里的白鹭</a></li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201804/t20180424_5001273.html">请善待实验动物！丨世界实验动物日</a>
                    </li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201804/t20180413_4996253.html">死亡是什么？动物能意识到吗？</a></li>
                    <li><a>优秀铲屎官手册</a></li>
                    <li>神秘的海洋</li>
                    <li>动植物科普</li>
                    <li>保护野生动物，应该怎么做？</li>
                    <li>鸟类的特征</li>
                    <li>秃鹫缘何百毒不侵</li>
                    <li> 为什么人会感到恶心？其实是进化上的自我保护</li>
                    <li> 面对死亡同胞，动物如何悲伤</li>
                    <li> 全力保护某一物种，与保护生物多样性，矛盾吗？</li>

                    <!--            http://www.ioz.cas.cn/kxcb/kpwz/-->
                    <!--            http://www.kepuchina.cn/ldyy/theme/natural/02/-->
                </ul>

                <h2 class="para-level-3 para-level-3-no-bg hover-right-btn">科普文章</h2>
                <ul id="articles2" class="list-box article-list hover-shadow hover-shadow-list hover-big-list ">
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201805/t20180518_5013074.html">羚牛袭击人的真相</a></li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201805/t20180507_5006939.html">诗歌里的白鹭</a></li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201804/t20180424_5001273.html">请善待实验动物！丨世界实验动物日</a>
                    </li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201804/t20180413_4996253.html">死亡是什么？动物能意识到吗？</a></li>
                    <li><a>优秀铲屎官手册</a></li>
                    <li>神秘的海洋</li>
                    <li>动植物科普</li>
                    <li>保护野生动物，应该怎么做？</li>
                    <li>鸟类的特征</li>
                    <li>秃鹫缘何百毒不侵</li>
                    <li> 为什么人会感到恶心？其实是进化上的自我保护</li>
                    <li> 面对死亡同胞，动物如何悲伤</li>
                    <li> 全力保护某一物种，与保护生物多样性，矛盾吗？</li>

                    <!--            http://www.ioz.cas.cn/kxcb/kpwz/-->
                    <!--            http://www.kepuchina.cn/ldyy/theme/natural/02/-->
                </ul>

                <h2 class="para-level-3 para-level-3-no-bg  hover-right-btn">科普文章</h2>
                <ul id="articles3" class="list-box article-list hover-shadow hover-shadow-list hover-big-list">
                    <li class="hover-shadow"><a class=""
                                                href="http://www.ioz.cas.cn/kxcb/kpwz/201805/t20180518_5013074.html">羚牛袭击人的真相
                    </a></li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201805/t20180507_5006939.html">诗歌里的白鹭</a></li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201804/t20180424_5001273.html">请善待实验动物！丨世界实验动物日</a>
                    </li>
                    <li><a href="http://www.ioz.cas.cn/kxcb/kpwz/201804/t20180413_4996253.html">死亡是什么？动物能意识到吗？</a></li>
                    <li><a>优秀铲屎官手册</a></li>
                    <li>神秘的海洋</li>
                    <li>动植物科普</li>
                    <li>保护野生动物，应该怎么做？</li>
                    <li>鸟类的特征</li>
                    <li>秃鹫缘何百毒不侵</li>
                    <li> 为什么人会感到恶心？其实是进化上的自我保护</li>
                    <li> 面对死亡同胞，动物如何悲伤</li>
                    <li> 全力保护某一物种，与保护生物多样性，矛盾吗？</li>

                    <!--            http://www.ioz.cas.cn/kxcb/kpwz/-->
                    <!--            http://www.kepuchina.cn/ldyy/theme/natural/02/-->
                </ul>

            </div>
            <!--            purple-->
            <div class="row " style="width: 90vw">
                <div class="broke-wall-crosswise hover-rotate"></div>
                <div class="taiji">
                    <div class="yang"></div>
                    <div class="yin"></div>
                </div>
                <div class="broke-wall-crosswise hover-rotate"></div>
            </div>


            <h2 class="para-level-3 hover-right-btn">给喜欢的动物投票</h2>
            <!--            style="height: 20vw;width: 90vw"-->
            <div id="vote" class="row-space">
                <!--                style="background-color:purple;"-->
                <div class="col">
                    <div class="img-container">
                        <!--                        style="display: block"-->
                        <img src="images/fish.jpg" class="heart-jump " alt="heart"/>
                    </div>
                    <div class="box"></div>
                    <!--                    box-->
                    <div class="" style="background-color:yellow;">
                        <button class="vote-btn">投票</button>
                        <p class="">分数: 1</p>
                        <img style="display: none" src="images/heart.png">
                        <!--                        margin-left-10vw-->
                    </div>
                </div>
                <div class="img-container">
                    <img src="images/doge.jpg" class="heart-jump" alt="heart"/>

                </div>
                <div class="box">
                    <button class="vote-btn">投票</button>
                    <p class="margin-left-10vw">1</p></div>
                <div class="img-container">
                    <img src="images/公鸡.jpg" class="heart-jump" alt="heart"/></div>
                <div class="img-container">
                    <img src="images/dogkawi.jpg" class="heart-jump" alt="heart"/></div>
                <!--                    <div>狗</div>-->
                <div class="img-container">
                    <img src="images/catkawai.jpg" class="heart-jump" alt="heart"/></div>
            </div>


        </div>

    </div>
</div>
<!--https://www.cnblogs.com/alanjl/p/3423858.html-->
<div id="gotop" class=" ">
    <!--    style="line-height:40px; text-align:center;"-->
    <a href="#top" class=" "> <i class="fa fa-arrow-up center-block hover-circle hover-rotate purple" title="回到顶部"
                                 style="width: 20px;height: 20px"></i></a>
</div>

<div id="copyright" class="copyright">
    <div>Copyright (C) <a href="animals.html">生物们！</a> 2016-2018, All Rights Reserved | 动物宠爱经营许可证
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <img style="border:0;width:31px;height:31px" src="images/heart.png" alt="Valid CSS!">
        </a>
    </div>
    <address>通讯地址：杜王町 &nbsp;&nbsp;电话：（010）87878787&nbsp;&nbsp;网管信箱：joske@diamond.jojo.bangumi.com</address>
</div>
<script src="js/button.js" type="text/javascript"></script>
<script src="js/strutil.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/vote.js" type="text/javascript"></script>
<!--<script src="js/audio.js" type="text/javascript"></script>-->

</body>
</html>